<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Mantech HelpDesk</title>
        <link rel="Shortcut Icon" href="../Image/web-icon.png" />

        <link href="../CSS/templatemo_style.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/demo_page.css" rel="stylesheet" type="text/css" />

        <script language="javascript" type="text/javascript">
            function clearText(field)
            {
                if (field.defaultValue == field.value) field.value = '';
                else if (field.value == '') field.value = field.defaultValue;
            }
        </script>
    </h:head>
    <h:body>
        <h:form>
            <div id="templatemo_container">    
                <div id="templatemo_header">
                    <div id="templatemo_logo">
                        <div id="templatemo_site_logo">
                            <span class="big">M</span>ANTECH <span class="green"><span class="big">H</span>ELPDECK</span>
                        </div>
                        <div id="templatemo_site_slogan">
                            Customer Helpdesk Management 
                        </div>
                    </div>
                    <div id="templatemo_header_right">
                        <div class="templatemo_email">
                            <h:panelGroup rendered="#{login.customer==null}">
                                <h:inputText value="#{login.userName}" name="user" class="field" title="User" onfocus="clearText(this)" onblur="clearText(this)" />
                                &nbsp;
                                <h:inputSecret  value="#{login.password}" name="password" class="field" title="password"  onfocus="clearText(this)" onblur="clearText(this)" />  &nbsp; 
                                <h:commandButton value="Sign In" styleClass="button" action="#{login.loginPage()}" ></h:commandButton><label style="color: red;margin-top: 3px;">#{login.alert}</label>

                            </h:panelGroup>
                            <h:panelGroup rendered="#{login.customer!=null}">
                                <a href="SubmitComplaint.xhtml"><img src="../image/icon_complaints.png" class="login" style="position: relative; float: right; top: -5px; left: 0px;
                                                 height: 34px;cursor: pointer;"></img></a>  
                                <h:commandLink   style="position: relative; float: right; top: 4px; left: -15px;
                                                 height: 34px;cursor: pointer;" class="login" id="logout" action="#{login.logout()}">Logout </h:commandLink> <a 
                                                 style="position: relative; float: right; top: 4px; left: -21px;
                                                 height: 34px;" class="login" href="Profile.xhtml">| Welcom #{login.customer.membersName} | 
                                </a>
                                <h:panelGroup rendered="#{login.customer.membersRole == 2 or login.customer.membersRole == 1 }">
                                  <a
                                        style="position: relative; float: right; top: 4px; left: -30px;
                                        height: 34px;" class="login" href="../Admin/index.xhtml">Manager</a>


                                </h:panelGroup>

                            </h:panelGroup>
                        </div>

                        <div id="templatemo_menu">
                            <div class="templaetmo_menu_item about">
                                <h1 class="menu_text"><a href="News.xhtml">TECHNOLOGY NEWS</a></h1>
                                <div class="menu_description">

                                </div>
                            </div>

                            <div class="templaetmo_menu_item faq">
                                <h1 class="menu_text" ><a href="#">FAQs</a></h1>
                                <div class="menu_description">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="templatemo_content_area">
                    <div id="templatemo_left_section">
                        <div class="templatemo_section_2">
                            <div class="templatemo_section_2_left">
                                <img src="../CSS/images/templatemo_home.png" alt="free template" />
                                <h:commandLink action="#{index.home()}">HOME</h:commandLink>
                            </div>
                            <div class="templatemo_section_2_right">
                                <img src="../CSS/images/templatemo_contact.png" alt="css template" />
                                <a href="#">CONTACT</a>
                            </div>
                        </div>
                        <div class="templatemo_section_1">
                            <div class="templatemo_h_line">
                            </div>
                            <h1>Category Complaints</h1>
                            <ui:repeat var="category" value="#{index.categorys}">
                                <img src="../CSS/images/templatemo_bullet.png" alt="butterfly"  style="margin-top: -10px"/> &nbsp;<h:commandLink action="#{index.complaintByCategory(category)}">#{category.categoryName}</h:commandLink>
                                <div class="templatemo_h_line_2">
                                </div>
                            </ui:repeat>

                        </div>
                        <div style="margin-bottom: 30px"></div>
                        <div class="templatemo_section_1">
                            <div class="templatemo_h_line">
                            </div>
                            <h1>Department</h1>
                            <ui:repeat var="department" value="#{index.departments}">
                                <img src="../CSS/images/templatemo_bullet.png" alt="butterfly"  style="margin-top: -10px"/> &nbsp;<h:commandLink action="#{index.complaintByDepartments(department)}">#{department.departmentName}</h:commandLink>
                                <div class="templatemo_h_line_2">
                                </div>
                            </ui:repeat>

                        </div>
                        <div style="margin-bottom: 30px"></div>
                        <div class="templatemo_section_1">
                            <div class="templatemo_h_line">
                            </div>
                            <h1>News</h1>
                            <ui:repeat var="article" value="#{index.articles}">
                                <img src="../CSS/images/templatemo_bullet.png" alt="butterfly"  style="margin-top: -10px;"/> &nbsp;<div style="width: 210px;float: right;margin-top: -21px"><h:commandLink action="#{newsDetail.articeleByID(article.articlesId)}">#{article.articlesTitle}</h:commandLink></div> 
                              
                                <div class="templatemo_h_line_2" style="clear: both;">
                                </div>
                            </ui:repeat>

                        </div>
                    </div><!-- End Of left -->

                    <div id="templatemo_right_section">
                        <ui:insert name="content"></ui:insert>
                    </div><!-- End Of Right -->

                    <div class="cleaner"></div>
                </div><!-- End Of Content area -->     
            </div><!-- End Of Container -->

            <div id="templatemo_footer">
                Copyright © 2012 FPT-APTECH | Designed by Group 3</div>
            <!--  Free CSS Templates by TemplateMo.com  -->
        </h:form>
    </h:body>
</html>

